<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-table-view{
        margin: 0;
    }
</style>
<body>
    <table id="see" lay-filter="see"></table>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增视频</button>
            <button class="layui-btn layui-btn-sm" id="batchUpload" lay-event="batchUpload">批量上传</button>
            <!-- <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchDel">批量删除</button> -->
        </div>
    </script>
    <script type="text/html" id="tbBar">
        {{#  if(d.sort <= 10 ){ }} 
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="mount">挂载配置</a>
        {{#  } }}
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">播放</a>
        {{#  if(d.is_pay === 1 ){ }}    
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="cancelCharge">取消收费</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setCharge">设置收费</a>
        {{#  } }}
        
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
    </script>
    <script>
        let video_id = GetQueryString('id')
        let video_name = GetQueryString('video_name')
        let params = {
            elem: '#see'
            , toolbar: '#toolbar'
            , url: '/admin/videoDetail/list' //数据接口
            , id: 'see'
            , page:true
            , where:{video_id}
            , height: 600
            , cols: [[ //表头
                { type: 'checkbox' }
                , { field: 'id', title: 'ID', width: 100, sort: true,align:'center' }
                , { field: 'sort', title: '剧集名称',align:'center',templet: function (d) {
                        return `第${d.sort}集`
                    } 
                }
                , { field: 'is_pay', title: '是否付费',align:'center', templet: function (d) {
                        return d.is_pay == 1 ? '是' : '否'
                    } 
                }
                , { field: 'is_members', title: '是否需要会员',align:'center', templet: function (d) {
                    return d.is_members == 1 ? '是' : '否'
                    } 
                }
                , { field: 'pay_amount', title: '消费k币',align:'center'}
                , { toolbar: '#tbBar', title: '操作',align:'center',width:270}
            ]]
        }
        tableList(params)

        layui.use('table', function () {
            var table = layui.table;
            table.on('toolbar(see)', function (obj) {
                var event = obj.event;
                if (event === 'add') {
                    x_admin_show('添加短剧', `./info.html?video_id=${GetQueryString('id')}`, 1050, 500);
                } else if(event === 'batchDel'){
                    var checkStatus = table.checkStatus('see')
                    if(checkStatus.data.length === 0){
                        layer.msg('请选择后再操作',{icon:5,time:1000});
                    }else{
                        let id_string = []
                        checkStatus.data.forEach(item=>{
                            id_string.push(item.id)
                        })
                        DeleteAjax('/admin/videoDetail/batchDelete',{ id_string:id_string.toString() },'see')
                    }
                }
            });
            table.on('tool(see)', function (obj) {
                var event = obj.event;
                if (event === 'look') {
                    x_admin_show('', obj.data.url, 550, 500,null);
                } else if (event === 'edit') {
                    x_admin_show('编辑短剧', `./info.html?id=${obj.data.id}`, 1050, 500);
                } else if (event === 'del') {
                    DeleteAjax('/admin/videoDetail/delete',{ id: obj.data.id },'see')
                } else if (event === 'setCharge') {
                    x_admin_show('设置从第多少集后开始收费',`./charge.html?video_id=${GetQueryString('id')}&sort=${obj.data.sort}`, 650, 300);
                } else if (event === 'cancelCharge') {
                    ChangeAjax('/admin/videoDetail/cancelCharge',{ video_id: GetQueryString('id'),sort: obj.data.sort},'see')
                }else if(event==='mount'){
                    console.log(obj.data.id)
                    x_admin_show('挂载配置',`./mount.html?video_id=${GetQueryString('id')}&video_name=${GetQueryString('video_name')}&did=${ obj.data.id }`, 1050, 600);
                }
            });
            let dataFile = []
            batchUploadFile({
                elem: '#batchUpload', 
                ossUrl:'/admin/videoDetail/uploadCredentials',
                multiple:true,
                accept:"video",
                acceptMime:'video/*',
                uploadSuccessCallback: function (res,fileName,allFileStatus) {
                    new Promise((resolve,reject)=>{
                        dataFile.push({
                            name:`第${fileName.split('.')[0]}集`,
                            sort:fileName.split('.')[0],
                            url:res.url,
                            is_members:0,
                            pay_amount:0,
                            video_id:GetQueryString('id')
                        })
                        resolve(dataFile)
                    }).then((data)=>{
                        if(allFileStatus){
                            Ajax('/admin/videoDetail/batchUpload',{data},'post').then(data =>{
                                dataFile = []
                                table.reloadData('see')
                            });
                        }
                    })
                    
                }, 
                uploadErrorCallback: function() {
                    return layer.msg('上传失败');
                },
            })
        });
        
        
        
    </script>
</body>

</html>